<div class="layui-fluid" id="VIEW-index" lay-title="首页">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg8">
            <div class="nepadmin-linecard layui-card">
                <div class="layui-card-header">实验室选择</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100" />
                            <col />
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>实验中心</td>
                                <td>电子信息与电子工程实验中心</td>
                            </tr>
                            <tr>
                                <td>实验室</td>
                                <td>
                                    创新实验室
                                </td>
                            </tr>
                            <tr>
                                <td>地址</td>
                                <td>C2-103</td>
                            </tr>
                            <tr>
                                <td>介绍</td>
                                <td>假介绍</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg4">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon layui-icon-notification-fill"></i> 排名
                </div>
                <div class="layui-card-extra nepadmin-c-gray">
                    <span class="nepadmin-c-blue" style="cursor:pointer" id="rank_day">今日</span>&nbsp;&nbsp;
                    <span style="cursor:pointer" id="rank_week">本周</span>&nbsp;&nbsp; <span style="cursor:pointer" id="rank_month">本月</span>&nbsp;&nbsp;
                </div>

                <div class="layui-tab-content " style="height: 200px;padding-bottom: 0px;">
                    <div class="layui-tab-item layui-show" id="tab_ranking_day">
                        <ul class="layui-table-body" style="height:200px;" id="LAY_ranking_day"></ul>
                    </div>
                    <div class="layui-tab-item" id="tab_ranking_week">
                        <ul class="layui-table-body" style="height:200px;" id="LAY_ranking_week"></ul>
                    </div>
                    <div class="layui-tab-item" id="tab_ranking_month">
                        <ul class="layui-table-body" style="height:200px;" id="LAY_ranking_month"></ul>
                    </div>
                </div>

                <div class="layui-card-body" style="background-color:#5a8bff;color:white">
                    我
                </div>

            </div>
        </div>


    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-extra nepadmin-c-gray">
                    <span class="nepadmin-c-blue" id="echart_time">近48小时</span>&nbsp;&nbsp;
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                    <ul class="layui-tab-title">
                        <li class="layui-this">人数</li>
                        <li>人时量</li>
                    </ul>
                    <div class="layui-tab-content" style="padding:0;">
                        <div class="layui-tab-item layui-show layui-table-body">
                            <div id="index-echartLine" style="width: 100%;height:450px;"></div>
                        </div>
                        <div class="layui-tab-item layui-table-body">
                            <div id="index-echartLine1" style="width: 100%;height:450px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    layui.use(['admin', 'echarts', 'element', 'helper', 'table', 'util', 'flow'],
        function(admin, echarts, element, helper, table, util, flow) {
            var $ = layui.jquery
            var view = $('#VIEW-chart-index')
            element.render('progress')

            createflow_rank('#LAY_ranking_day', 'day');

            var updata = new Object();
            updata.action = "people";
            admin.get({
                api: 'data',
                data: updata,
                success: function(res) {
                    if (res.code == 200) {
                        createChart_people(res.start, res.data);
                    }
                },
                complete: function() {}
            });

            var peopletime_echart_isinit = false;

            element.on('tab(index-chart)', function(data) {

                if (data.index == 0) {
                    $('#echart_time').text('近48小时');
                } else if (data.index == 1) {
                    if (peopletime_echart_isinit == false) {
                        var updata = new Object();
                        updata.action = "time";
                        admin.get({
                            api: 'data',
                            data: updata,
                            success: function(res) {
                                if (res.code == 200) {
                                    createChart_time(res.start, res.data);
                                    peopletime_echart_isinit = true;
                                }
                            },
                            complete: function() {}
                        });
                    }
                    $('#echart_time').text('近15天');
                }

            })

            function createChart_people(start_time, data) {
                var seriesData = []
                var xAxisData = []
                var time = new Date(start_time.replace(/-/g, "/"));
                var base_hour = time.getHours();
                for (var i = 0; i < 24; i++) {
                    seriesData.push(data[i])
                    hour = (base_hour + (i + 1) * 2) % 24;
                    xAxisData.push((hour < 10 ? '0' + hour : hour) + ':00')
                }

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                    },
                    yAxis: {
                        max: function(val) {
                            return Math.ceil(val.max * 1.05)
                        },
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisPointer: {
                            snap: true
                        }
                    },
                    series: [{
                        name: '前两小时人数',
                        type: 'line',
                        symbolSize: 12,
                        lineStyle: {
                            normal: {
                                width: 5,
                                shadowColor: '#5a8bff',
                                shadowBlur: 40,
                                shadowOffsetY: 10
                            }
                        },
                        data: seriesData
                    }]
                }
                echarts
                    .init(document.getElementById('index-echartLine'), 'blue')
                    .setOption(option)
            }

            var rank_week_isinit = false;
            var rank_month_isinit = false;

            $('#rank_day')[0].onclick = function(data) {
                $("#rank_day").attr("class", "nepadmin-c-blue");
                $("#rank_week").attr("class", "");
                $("#rank_month").attr("class", "");

                $("#tab_ranking_day").addClass("layui-show");
                $("#tab_ranking_week").removeClass("layui-show");
                $("#tab_ranking_month").removeClass("layui-show");
            }

            $('#rank_week')[0].onclick = function(data) {
                if (rank_week_isinit == false) {
                    createflow_rank('#LAY_ranking_week', 'week');
                    rank_week_isinit = true;
                }


                $("#rank_day").attr("class", "");
                $("#rank_week").attr("class", "nepadmin-c-blue");
                $("#rank_month").attr("class", "");

                $("#tab_ranking_day").removeClass("layui-show");
                $("#tab_ranking_week").addClass("layui-show");
                $("#tab_ranking_month").removeClass("layui-show");
            }

            $('#rank_month')[0].onclick = function(data) {
                if (rank_month_isinit == false) {
                    createflow_rank('#LAY_ranking_month', 'month');
                    rank_month_isinit = true;
                }

                $("#rank_day").attr("class", "");
                $("#rank_week").attr("class", "");
                $("#rank_month").attr("class", "nepadmin-c-blue");

                $("#tab_ranking_day").removeClass("layui-show");
                $("#tab_ranking_week").removeClass("layui-show");
                $("#tab_ranking_month").addClass("layui-show");
            }

            function createChart_time(start_time, data) {
                var seriesData = []
                var xAxisData = []

                var time = new Date(start_time.replace(/-/g, "/"));

                for (var i = 0; i < 15; i++) {
                    seriesData.push(data[i])
                    xAxisData.push((time.getMonth() + 1) + '月' + time.getDate() + '日')

                    time = new Date(time.getTime() + 24 * 60 * 60 * 1000);
                }

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                    },
                    yAxis: {
                        max: function(val) {
                            return Math.ceil(val.max * 1.05)
                        },
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisPointer: {
                            snap: true
                        }
                    },
                    series: [{
                        name: '本日人时量',
                        type: 'line',
                        symbolSize: 12,
                        lineStyle: {
                            normal: {
                                width: 5,
                                shadowColor: '#5a8bff',
                                shadowBlur: 40,
                                shadowOffsetY: 10
                            }
                        },
                        data: seriesData
                    }]
                }
                echarts
                    .init(document.getElementById('index-echartLine1'), 'blue')
                    .setOption(option)
            }

            function createflow_rank(flow_select, time) {
                flow.load({
                    elem: flow_select,
                    scrollElem: flow_select,
                    mb: 20,
                    done: function(page, next) { //执行下一页的回调
                        var updata = new Object();
                        updata.action = "ranking";
                        updata.time = time;
                        updata.page = page;
                        updata.size = 20;

                        admin.get({
                            api: 'data',
                            data: updata,
                            success: function(res) {
                                if (res.code == 200) {
                                    var lis = [];
                                    layui.each(res.data, function(index, item) {
                                        hour = Math.floor(item.time / 3600);
                                        min = Math.floor(item.time % 3600 / 60);
                                        lis.push('<li>' + ((page - 1) * updata.size + index + 1) + item.name + '  ' + hour + '小时' + min + '分钟</li>');
                                    });
                                    next(lis.join(''), page < res.pages);
                                }
                            },
                            complete: function() {

                            }
                        });

                    }
                });

            }

        }
    )
</script>